import React from "react";
import QueueAnim from "rc-queue-anim";
import { Row, Col } from "antd";
import OverPack from "rc-scroll-anim/lib/ScrollOverPack";
import { getChildrenToRender } from "./utils";
import "rc-banner-anim/assets/index.css";
import BannerAnim, { Element, Thumb, Arrow } from "rc-banner-anim";
import { Parallax } from 'rc-scroll-anim';
class Content extends React.PureComponent {
  render() {
    const { dataSource, isMobile, ...props } = this.props;
    const {
      wrapper,
      titleWrapper,
      titleWrapper2,
      page,
      OverPack: overPackData,
      childWrapper,
    } = dataSource;
    return (
      <div {...props} {...wrapper}>
        <div {...page}>
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              position: "relative",
            }}
          >
            <div
              style={{
                display: "flex",
                position: "absolute",
                width: "110%",
                justifyContent: "space-between",
                top: "50%",
                transform: "translate(0, -50%)",
              }}
            >
              <div
                style={{
                  border: "1px solid rgb(206 206 206)",
                  width: (window.screen.width - 650) / 2.5 + "px",
                }}
              ></div>
              <div
                style={{
                  border: "1px solid rgb(206 206 206)",
                  width: (window.screen.width - 650) / 2.5 + "px",
                }}
              ></div>
            </div>
            <h1 style={{ color: "red", marginRight: "10px" }}>PRODUCT</h1>
            <h1>CLASSIFICATION</h1>
          </div>
          <div {...titleWrapper}>
            {titleWrapper.children.map(getChildrenToRender)}
          </div>
          <BannerAnim
            prefixCls="banner-user"
            sync={true}
            thumb={false}
            autoPlaySpeed={4000}
            type="across"
            duration={900}
          >
            <Element prefixCls="banner-user-elem" key="0">
              <div
                key={1}
                style={{
                  display: "flex",
                  height: "100%",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <div className="item" key="item1">
                  <div className="itemImg"></div>
                  <div className="itemButton">混式1，3-二氯丙烯</div>
                </div>
                <div className="item" key="item2">
                  <div className="itemImg"></div>
                  <div className="itemButton">环保氯化石蜡</div>
                </div>
                <div className="item" key="item3">
                  <div className="itemImg"></div>
                  <div className="itemButton">二氯丙烷</div>
                </div>
                <div className="item" key="item4" style={{ marginRight: 0 }}>
                  <div className="itemImg"></div>
                  <div className="itemButton">1，2-二氯丙烷</div>
                </div>
              </div>
            </Element>
            <Element prefixCls="banner-user-elem" key="1">
              <div
                style={{
                  display: "flex",
                  height: "100%",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <div className="item">
                  <div className="itemImg"></div>
                  <div className="itemButton"></div>
                </div>
                <div className="item">
                  <div className="itemImg"></div>
                  <div className="itemButton"></div>
                </div>
                <div className="item">
                  <div className="itemImg"></div>
                  <div className="itemButton"></div>
                </div>
                <div className="item" style={{ marginRight: 0 }}>
                  <div className="itemImg"></div>
                  <div className="itemButton"></div>
                </div>
              </div>
            </Element>
          </BannerAnim>
          <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  position: "relative",
                  marginTop: "70px",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    position: "absolute",
                    width: "110%",
                    justifyContent: "space-between",
                    top: "50%",
                    transform: "translate(0, -50%)",
                  }}
                >
                  <div
                    style={{
                      border: "1px solid rgb(206 206 206)",
                      width: (window.screen.width - 650) / 2 + "px",
                    }}
                  ></div>
                  <div
                    style={{
                      border: "1px solid rgb(206 206 206)",
                      width: (window.screen.width - 650) / 2 + "px",
                    }}
                  ></div>
                </div>
                <h1 style={{ color: "red", marginRight: "10px" }}>ABOUT</h1>
                <h1>US</h1>
              </div>
              <div {...titleWrapper2}>
                {titleWrapper2.children.map(getChildrenToRender)}
              </div>
        </div>
      </div>
    );
  }
}

export default Content;
